<template>
  <div :id="chartId" :style="{height:height,width:width}" class="my-chart" />
</template>
<script>
import echarts from 'echarts'
import { toolboxPie } from '@/components/MyCharts/toolbox'
import resize from '@/views/dashboard/admin/components/mixins/resize'
export default {
  mixins: [resize],
  props: {
    chartId: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    dataRing: {
      type: Array,
      default: () => {
        return []
      }
    },
    title: {
      type: String,
      default: ''
    },
    valTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    dataRing: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.chartId))

      this.setOptions(this.dataRing)
    },
    setOptions(dataRing) {
      const legendData = []
      dataRing.forEach(item => {
        legendData.push(item.name)
      })
      this.chart.setOption({
        tooltip: {// 提示框，可以在全局也可以在
          trigger: 'item', // 提示框的样式
          // formatter: "{a} <br/>{b}: {c} ({d}%)",
          formatter: (params) => {
            const str = `${params.name}<br />${params.value}万元(${params.percent}%)`
            return str
          },
          color: '#000', // 提示框的背景色
          textStyle: { // 提示的字体样式
            color: '#fff'
          }
        },
        toolbox: toolboxPie(this.valTitle),
        legend: { // 图例
          orient: 'vertical', // 图例的布局，竖直    horizontal为水平
          x: 'left', // 图例显示在右边
          data: legendData,
          textStyle: { // 图例文字的样式
            color: '#333', // 文字颜色
            fontSize: 12 // 文字大小
          }
        },
        series: [
          {
            name: '医疗费用各部分构成',
            type: 'pie', // 环形图的type和饼图相同
            radius: ['50%', '70%'], // 饼图的半径，第一个为内半径，第二个为外半径
            color: ['#D1FBEF', '#4CD0DD', '#DF86F0', '#F5A7C1'],
            label: {
              normal: { // 正常的样式
                show: true,
                position: 'left'
              },
              emphasis: { // 选中时候的样式
                show: true,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              }
            }, // 提示文字
            labelLine: {
              normal: {
                show: true
              }
            },
            data: dataRing
          }
        ]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.my-chart {
  /deep/ .charts-table {
    width: 100%;
    border: 1px solid #dfe6ec;
    text-align: center;
    border-collapse: collapse;
    >thead{
      >tr{
        >th{
          height: 40px;
          background: #F0F2F5;
          border-right: 1px solid #cecece;
          border-bottom: 1px solid #dfe6ec;
          &:last-child {
            border-right: none;
          }
        }
      }
    }
    >tbody {
      >tr{
        >td{
          height: 40px;
          border-right: 1px solid #cecece;
          border-bottom: 1px solid #dfe6ec;
          &:last-child {
            border-right: none;
          }
        }
        &:last-child {
          >td {
            border-bottom: none;
          }
        }
      }
    }
  }
}
</style>

